<!DOCTYPE html>
<html>
	<head>
		<title>Home</title>
		<!--bootstarp-css-->
		<link href="../css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
		<!--/bootstarp-css -->
		<!--css-->
		<link rel="stylesheet" href="../css/style.css" type="text/css" media="all" />
		<link href="../css/hover.css" rel="stylesheet" media="all">
		<!--领养-->
		<style>
			#search-top {
				z-index: 9999;
				background: #fff;
				padding: 10px;
			}

			#search-top .input-group-addon {
				border-radius: 0;
			}

			#loadLocation {
				border-right: none;
				color: #ff6735;
			}

			.panel-body {
				padding: 0 10px;
			}

			.panel-body .radio {
				padding-left: 30px;
			}

			label {
				font-weight: normal;
			}

			.page-container {
				width: 970px;
				margin: 10px auto;
			}

			.search-city {
				padding-right: 5px;
			}

			#addPost {
				margin-top: 80px;
			}

			#lingyang-list2 {
				margin: 10px 0;
			}

			#lingyang-list2 li {
				background: #fff;
				padding: 10px;
				position: relative;
			}

			#lingyang-list2 a:hover {
				text-decoration: none;
			}

			#lingyang-list2 .media-heading {
				height: 30px;
				line-height: 30px;
				font-size: 16px;
				;
				overflow: hidden;
				margin-bottom: 10px;
			}

			#lingyang-list2 .address {
				color: #999;
			}

			#lingyangList_page .fabu-btn {
				margin-bottom: 10px;
			}

			#lingyangList_page .panel {
				margin-bottom: 10px;
			}

			.ly-cell-con .media-heading .btn {
				position: absolute;
				left: 5px;
			}

			.ly-cell-con .figure .btn {
				position: absolute;
			}

			.xs-button {
				margin: 10px 10px 0;
				width: auto;
			}

			/* 筛选标签卡 */
			.mobile-nav .filter {
				/* font 16 */
				background: #f4f4f4;
				width: 100%;
				z-index: 1;
			}

			.mobile-nav .filter li {
				/* font 14 */
				float: left;
				width: 25%;
				text-align: center;
				font-size: 0.875em;
				height: 39px;
				line-height: 39px;
				padding-bottom: 1px;
				border-right: 1px solid #e4e4e4;
				border-bottom: 1px solid #e4e4e4;
			}

			.mobile-nav .filter li:last-child {
				border-right: none;
			}

			.mobile-nav .filter li a {
				font-size: 14px;
				color: #333;
				display: block;
			}

			.mobile-nav ul {
				margin-bottom: 0;
			}

			.mobile-nav li.filter_active {
				padding-bottom: 0;
				border-bottom-width: 2px;
				border-bottom-color: #ff9900;
			}

			.mobile-nav .f_condition a {
				display: block;
				text-indent: -10%;
				height: 39px;
				line-height: 39px;
				padding-bottom: 1px;

				background: url() no-repeat 74% 50%;
				background-size: 6px 9px;
			}

			.mobile-nav .f_condition_act a {
				background-image: url();
			}

			.mobile-nav .param-check-box {
				padding: 10px;
				background: #fff;
			}

			.param-check-box {
				position: relative;
				border-bottom: 1px solid #f1f2f4;
				padding-left: 5px;
			}

			.param-check-box ul {
				padding-top: 10px;
				padding-bottom: 0;
				margin-bottom: 0;
			}

			.param-check-box ul>li {
				line-height: 35px;
				margin-bottom: 10px;
			}

			.param-check-box ul>li input[type="radio"] {
				display: none;
			}

			.param-check-box ul>li .active {
				background: #f1f2f4;
			}

			.param-check-box ul>li .radio-inline {
				border: 1px solid #ccc;
				padding: 0 10px;
			}

			.param-check-box .btn {
				text-shadow: none;
				line-height: 35px;
				padding: 0 12px;
				margin-right: 10px;
				background: #fff;
				box-shadow: none;
				border: 1px solid #ccc
			}

			.param-check-box .btn.active {
				background: #f1f2f4;
			}

			#pack_up {
				bottom: 10px;
				position: absolute;
				right: 10px;
			}

			@media screen and (max-width: 768px) {
				#lingyangList_page {
					padding: 0;
				}

				#lingyang-list2 {
					margin: 0;
				}

				.search-city {
					padding-right: 0;
				}

				#search-top {
					background: #f1f2f4;
					padding: 0 10px;
				}

				.w-box {
					background-color: #fff;
					margin: 10px auto;
					padding: 10px;
					width: 100%;
				}
			}
		</style>
		<!--/css-->
		<style>
			.page-container a,
			.page-container a:hover {
				color: #0c8687;
				font-size: 14px;
				text-decoration: none;
			}

			.pagination>.active>a,
			.pagination>.active>span,
			.pagination>.active>a:hover,
			.pagination>.active>span:hover,
			.pagination>.active>a:focus,
			.pagination>.active>span:focus {
				z-index: 3;
				color: #fff;
				cursor: default;
				background-color: #0c8687;
				border-color: #0c8687;
			}

			.pagination>li>a {
				color: rgb(187, 187, 187);
			}
		</style>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="keywords" content="Petcare Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, 
Smartphone Compatible web template, free web designs for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
		<script type="application/x-javascript">
			addEventListener("load", function() {
				setTimeout(hideURLbar, 0);
			}, false);

			function hideURLbar() {
				window.scrollTo(0, 1);
			}
		</script>
		<script src="../js/jquery.min.js"></script>
		<script src="../js/modernizr.custom.js"></script>
		<script src="../js/responsiveslides.min.js"></script>
		<script>
			// You can also use "$(window).load(function() {"
			$(function() {
				$("#slider2").responsiveSlides({
					auto: true,
					pager: true,
					speed: 300,
					namespace: "callbacks",
				});
			});
		</script>
	</head>
	<body>
		<!--header-->
		<div class="header">
			<div class="header-info">
				<div class="container">
					<div class="logo">
						<a href="index.html"><img src="../images/logo-pet.png" style="position: absolute;width: 330px;height: 262px;top: -60px;left: 280px;"/></a>
					</div>
					<div class="search-box">
						<form>
							<input type="text" name="s" class="textbox" placeholder="Search" required="">
							<input type="submit" value="">
						</form>
					</div>
					<div class="clearfix"> </div>
				</div>
			</div>
		</div>
		<div class="container">
			<div class="header-bottom">
				<div class="menu">
					<span class="menu-info"> </span>
					<ul class="cl-effect-21">
						<li id="oneser"><a id="service" href="index.html" class="active">服务中心</a>
							<div id="yican">
								<div>
									<p><a href="adopt.html">宠物领养</a></p>
									<p><a href="farmed.html">宠物寄养</a></p>
									<p><a href="notice.html">寻宠|招领</a></p>
								</div>
							</div>
						</li>
						<li><a href="petbaike.html">宠物百科</a></li>
						<li><a href="news.html">宠物新闻</a></li>
						<li><a href="bbs.html">宠物论坛</a></li>
						<li><a>关于我们</a></li>
						<li id="twoser">
							<a id="myme">个人中心</a>
							<div id="yincan">
								<div>
									<p><a href="myinfo.html">我的</a></p>
									<p><a id="overpet">注销</a></p>
								</div>
							</div>
						</li>
					</ul>
				</div>
				<style>
					#yincan {
						width: 160px;
						height: 110px;
						position: absolute;
						top: 70px;
						right: 46px;
						background-color: #fff;
						display: none;
					}
				</style>
				<!--yican -->
				<script type="text/javascript">
					$("#service").mouseenter(function() {
						$("#yican").css("display", "block");
					});
					$("#oneser").mouseleave(function() {
						$("#yican").css("display", "none");
					});
					$("#myme").mouseenter(function() {
						$("#yincan").css("display", "block");
					});
					$("#twoser").mouseleave(function() {
						$("#yincan").css("display", "none");
					});
					//注销
					$("#overpet").click(function(){
						if(!confirm('是否确定注销该用户并退出登录？'))
						return;
						$.post('http://localhost:80/ct/remove',function(res){
							if(res){
								location.href='login.html';
							}
						});
					})
				</script>
				<!-- /yican -->
				<!--script-nav -->
				<script>
					$("span.menu-info").click(function() {
						$("ul.cl-effect-21").slideToggle("slow", function() {});
					});
				</script>
				<!-- /script-nav -->
				<div class="clearfix"> </div>
			</div>
		</div>
		<div class="page-container" style="position: relative;">
			<span class="label label-warning hidden-xs" style="position: absolute;top: 50px;left: 10px;">宠物领养</span>
			<div class="row" id="lingyangList_page shop_list_page">
				<div class="col-md-9">
					<div class="pin-wrapper" style="height: 60px;">
					</div>
					<div style="margin-top:10px">
						<ul class="media-list" id="lingyang-list2">
							<li class="media ly-cell-con">
								<a class="pull-left" href="AdoptDetails.html">
									<img src="http://i1.bagong.cn/07/aa/e448098c64d29759dff0795cdc6f_100x100_1.jpg"
										alt="我有一只蓝猫想找个好主人" style="width: 100px; height: 100px">
								</a>
								<div class="media-body">
									<a href="AdoptDetails.html">
										<h4 class="media-heading"> 我有一只蓝猫想找个好主人</h4>
									</a>
									<div class="address">
										<p><i class="fa fa-calendar"></i> 2023-08-12 <i class="fa fa-map-marker"></i>
											株洲市荷塘区430单身…</p>
										<p style="height: 20px; overflow: hidden">性格温顺 胆小 无任何攻击性 一岁多 疫苗已打…</p>
									</div>
								</div>
							</li>
						</ul>
						<div class="clearfix" style="padding: 20px 0 0 0">
						</div>
						<div class="text-center hidden-xs" style="margin-left: 256px;">
							<style>
								.pagination input {
									outline: none;
									border-radius: 4px;
									width: 50px;
									height: 36px;
									outline: none;
									border: 1px #DDDDDD solid;
									text-align: center;
								}

								#go-page {
									border: 1px #0c8687 solid;
									color: #fff;
									background: #0c8687;
								}
							</style>
							<ul class="pagination">
								<li class="active"><a href="javascript:void(0)" id="firstpage" title="首页">首页</a></li>
								<li><a href="javascript:void(0)" id="prevpage" title="上一页">上一页</a></li>
								<li><a href="javascript:void(0)" id="nextpage" title="下一页">下一页</a></li>
								<li><a href="javascript:void(0)" id="lastpage" title="最后一页">尾页</a></li>
								<li style="margin-left: 20px;">第<input type="text" id="pagenum" value="1" />页
									<input type="button" value="GO" id="go-page" style="" />
								</li>
							</ul>					
						</div>

					</div>
				</div>
				<div class="col-md-3 col-xs-12 hidden-xs hidden-sm">
					<div class="pin-wrapper" style="height: 852px;">
						<div id="innMapBoxWrapper" style="width: 220px; top: 50px; position: absolute;">
							<span class="label label-info">查询</span>
							<input type="text" id="selectaddress" class="form-control" placeholder="地区"/>
							<style>
								#fb,
								#fb:hover {
									color: #fff;
									margin-top: 10px;
								}
							</style>
							<a class="btn btn-danger btn-block fabu-btn showAddPostModal" id="fb"
								href="adoptPost.html">发布</a>	
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--/header-->
		<!--footer-->
		<div class="footer">
			<div class="container">
				<div class="copy-rights">
					<p>Copyright &copy; 2023.Company <a target="_blank" href="index.html">you宠</a></p>
				</div>

			</div>
		</div>
		<!--/footer-->
		<!-- 分页样式 -->
		<script>
			$(function() {
				$(".pagination li").click(function() {
					$(this).children("a").css("color", "#fff");
					$(this).children("a").css("cursor", "default");
					$(this).children("a").css("background-color", "#0c8687");
					$(this).children("a").css("border-color", "#0c8687");
					$(this).siblings().children("a").css("color", "#bbb");
					$(this).siblings().children("a").css("cursor", "default");
					$(this).siblings().children("a").css("background-color", "#fff");
					$(this).siblings().children("a").css("border-color", "#ddd");
		
				})
			})
		</script>		
	
	<script type="text/javascript">
		$(function(){
			let index = 1;
			let pages = 1;
			$("#selectaddress").blur(function() {
				index = 1;
				$("#pagenum").val(1);
				adoptall();
			})
			//前往第几页
			$("#go-page").click(function() {
				let pagenum = $("#pagenum").val();
				if (pagenum > 0) {
					index = pagenum;
				}
				if (pagenum == 0) {
					alert("输入页码需大于0！");
					$("#pagenum").val(1);
					index = 1;
				}
				if (pagenum > pages) {
					alert("输入页码大于最大页数！");
					$("#pagenum").val(1);
					index = 1;
				}
				adoptall();
			})
			//首页
			$("#firstpage").click(function() {
				index = 1;
				$("#pagenum").val(1);
				adoptall();
			})
			//尾页
			$("#lastpage").click(function() {
				$("#pagenum").val(pages);
				index = pages;
				adoptall();
			})
			//上一页
			$("#prevpage").click(function() {
				if (index >= 2) {
					index = index - 1;
					$("#pagenum").val(index);
				} else {
					alert("当前已是第一页！");
				}
				adoptall();
			})
			//下一页
			$("#nextpage").click(function() {
				if (index < pages) {
					index = index + 1;
			
					$("#pagenum3").val(index);
				} else {
					alert("当前已是最后一页！");
				}
				adoptall();
			})
						
			adoptall();
			function adoptall(){
				$.post('http://localhost:80/ct/adoptAll',{"index":index,"address":$("#selectaddress").val()},function(res){
					console.log(res);
					$("#lingyang-list2").children().remove();
					$(res.records).each(function(i,e){	
						let det =e.adetail;
						if(det.length > 10){
							det =det.slice(0,10)+"...";
						}
						let lis ="<li class='media ly-cell-con'>"+
							"<a class='pull-left' href='AdoptDetails.html?aid="+e.aid+"'>"+
								"<img src='../images/"+e.afile+"' alt='"+e.atitle+"' style='width: 100px; height: 100px'>"+
							"</a>"+
							"<div class='media-body'>"+
								"<a href='AdoptDetails.html?aid="+e.aid+"'>"+
									"<h4 class='media-heading'>"+e.atitle+"</h4>"+
								"</a>"+
								"<div class='address'>"+
									"<p style='font-size: 13px;'><i class='fa fa-calendar'></i> "+e.adate+" <i class='fa fa-map-marker'></i>"+e.address+"</p>"+
									"<p style='font-size: 13px;height: 20px; overflow: hidden'>"+det+"</p>"+
							"</div>"+
						"</li>";
						$("#lingyang-list2").append(lis);
					})
					pages = res.pages;
				},"json");
			}
		})
	</script>
	
	</body>
</html>